<template>
  <div>
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="类型">
        <el-select v-model="form.type" size="medium" placeholder="请选择类型" clearable>
          <el-option v-for="item in this.selectList" :key="item.id" :label="item.title" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="medium" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-timeline>
      <el-timeline-item v-for="item in this.list" :key="item.id" :timestamp="item.create_time" placement="top">
      <el-card v-if="item.type === 4"><!-- 日常上报 -->
          <el-row>
            <el-col :span="6">{{item.type_title}}</el-col>
            <el-col :span="6">问题程度：{{item.report_person}}</el-col>
            <el-col :span="6">问题类型：{{item.report_source}}</el-col>
            <el-col :span="6"><el-button type="text" @click="detailsFn(item.type, item)">查看详情</el-button></el-col>
          </el-row>
          <br>
          <p>{{item.report_telephone}}</p>
        </el-card>
        <el-card v-if="item.type === 3"><!-- 复检评估 -->
          <el-row>
            <el-col :span="6">{{item.type_title}}</el-col>
            <el-col :span="6">问题程度：{{item.problem_degree_title}}</el-col>
            <el-col :span="6">问题类型：{{item.question_type_title}}</el-col>
            <el-col :span="6"><el-button type="text" @click="detailsFn(item.type, item)">查看详情</el-button></el-col>
          </el-row>
          <br>
          <p>{{item.notes}}</p>
        </el-card>
        <el-card v-if="item.type === 2"><!-- 添加预警 -->
          <el-row>
            <el-col :span="6">{{item.type_title}}</el-col>
            <el-col :span="6">问题程度：{{item.problem_degree_title}}</el-col>
            <el-col :span="6">问题类型：{{item.question_type_title}}</el-col>
            <el-col :span="6"><el-button type="text" @click="detailsFn(item.type, item)">查看详情</el-button></el-col>
          </el-row>
          <br>
          <p>{{item.notes}}</p>
        </el-card>
        <el-card v-if="item.type === 1"><!-- 测评预警 -->
          <el-row>
            <el-col :span="6">{{item.type_title}}</el-col>
            <el-col :span="6">问题程度：{{item.problem_degree_title}}</el-col>
            <el-col :span="6">问题类型：{{item.question_type_title}}</el-col>
            <el-col :span="6"><el-button type="text" @click="detailsFn(item.type, item)">查看详情</el-button></el-col>
          </el-row>
          <br>
          <p>{{item.notes}}</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>
<script>
import {APICRISISGETSUNDRY, APICRISISGETTRACKRECORDLIST} from '@/common/api.js'
export default {
  props: ['id'],
  data () {
    return {
      form: {
        crisis_id: '',
        type: ''
      },
      list: [],
      selectList: []
    }
  },
  created () {
    this.selectFn()
    this.tableList()
  },
  methods: {
    goBack () {
      this.$router.push({path: '/crisis'})
    },
    selectFn () {
      APICRISISGETSUNDRY().then((res) => {
        this.selectList = res.data.track_status_list
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    tableList () {
      this.form.crisis_id = this.id
      APICRISISGETTRACKRECORDLIST(this.form).then((res) => {
        this.list = res.data.list
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    onSubmit () {
      this.tableList()
    },
    detailsFn (type, val) {
      if (type === 4) {
        this.$router.push({path: '/dailyReportDetails', query: {id: this.id, type: val.question_type, real_name: val.real_name, track_record_id: val.id}})
      } else if (type === 3) {
        window.open('/api/report/recheckReport?id=' + this.id + '&uid=' + val.uid + '&token=' + window.sessionStorage.getItem('token'))
      } else if (type === 2) {
        this.$router.push({path: '/addWarning', query: {id: this.id, early_warning_id: val.public_id}})
      } else if (type === 1) {
        window.open('/api/report/getRecommendIndividualReportView?id=' + this.id + '&report_id=' + val.report_id + '&token=' + window.sessionStorage.getItem('token'))
      }
    }
  }
}
</script>
